<template>
	<view class="wheel-page">

		<!-- <view class="notice flex_r_around">
			<u-notice-bar color="#FFF" bgColor="transparent" :text="list" direction="column"
				fontSize="24rpx"></u-notice-bar>
		</view> -->

		<view class="wheel">
			<view class="wheel_header">
				<image :src="$util.prefix('wheel/wheel_header.png')"></image>
			</view>
			<view class="poabox">
				<LuckyWheel :blocks="blocks" :prizes="prizes" :buttons="buttons" ref="LuckDraw" @start="startCallBack"
					@end="endCallBack" :default-config="defaultConfig" />
			</view>

			<view class="container">
				<view class="container_image flex_c">
					<view class="tab flex_r_between">
						<view class="item" :id="tab == 1 ? 'select' : ''" @click="onTab(1)">活动说明</view>
						<view class="item" :id="tab == 2 ? 'select' : ''" @click="onTab(2)">抽奖记录</view>
						<!-- <view class="item" :id="tab == 3 ? 'select' : ''" @click="onTab(3)">活动说明</view> -->
					</view>
				</view>
			</view>


		</view>
		<view class="content" v-if="tab == 1">
			<view class="rich">
				<view class="rich_list flex_center" v-for="(item,index) in richText" :key="index">
					<view class="left">{{ index + 1 }}</view>
					<view class="right">{{ item }}</view>
				</view>
			</view>
		</view>

		<view class="content" v-if="tab == 2">
			<view style="padding: 32rpx 0;">
				<view class="banner flex_center">
					<view class="banner_item flex_c">
						<text>获奖总金额</text>
						<view>
							{{total_prize_num || 0}}
						</view>
					</view>
				</view>
			</view>
			<empty v-if="!log.length"></empty>
			<view class="list flex_r_between" v-for="(item,index) in log" :key="index">
				<view class="left flex_center">
					<view class="name">
						<text class="hidden">获得</text>
						<view class="hidden">
							<uni-dateformat :date="item.create_time * 1000" format="yyyy.MM.dd hh:mm"></uni-dateformat>
						</view>
					</view>
				</view>
				<view class="right flex_c" style="align-items: flex-end;">
					<view>
						{{ item.rmb_price }}
					</view>
					<text>购物卡</text>
				</view>
			</view>
		</view>

		<u-popup :show="model" @close="close" mode="center" bgColor="transparent" :safeAreaInsetBottom="false">
			<view class="success flex_c">
				<!-- <view class="header flex_c">
					<text>{{model_text}}</text>
				</view> -->

				<view class="lottie" :id="showAni ? 'show' : ''">
					<image :src="$util.prefix(`wheel/${model_image}.png`)"></image>
					<view class="text">{{model_num}}</view>
				</view>

				<view class="btn" @click="close">
					<view>开心收下</view>
				</view>
			</view>
		</u-popup>

		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<wLoading ref="loading"></wLoading>
	</view>
</template>

<script>
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel';
	import empty from '@/compentents/empty/empty.vue';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			LuckyWheel,
			empty,
			HevuLoading,
			ProgressBar,
			wLoading
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},
		data() {
			return {
				defaultConfig: {
					gutter: '4px',
					speed: 10,
					accelerationTime: 3000,
					decelerationTime: 3000,
				},
				buttons: [{
					radius: '30px',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/point.png',
						width: "240%",
						top: '-240%'
					}],
					fonts: [{
							text: '剩余0次',
							top: '100%',
							fontSize: 10,
							fontColor: '#FFF',
						},
						{
							text: '抽奖',
							top: '-48%',
							fontSize: 14,
							fontColor: '#FFF',
						},
					]
				}],
				blocks: [{
					padding: '16px',
					background: '#C80115',
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/bg.png',
						width: "100%",
					}],
				}, ],

				prizes: [],
				tab: 1,

				list: [],
				page: 1,
				total: 0,

				log: [],
				logpage: 1,
				logtotal: 0,
				total_prize_num: 0,

				model: false,
				model_num: '',

				isable: true,

				showAni: false,

				// 剩余次数
				haveNum: 1,

				model_text: '恭喜您',
				model_image: 'model',


				// 图片预加载 数组
				load_image: [
					// 总背景
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/page_bg.png',
					// 转盘背景
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/bg.png',
					// 抽奖按钮(指针)
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/point.png',
					// 红包弹窗
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/model.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/model_more.png',

				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,


				richText: [
					'用户每购买一单，我们将补贴该订单金额的10%到奖池，然后用户在完成订单后，获得抽奖机会一次。奖金大小为5元，10元，15元，30元，50元，100元，150元，300元，500元，800元',
					'抽中的红包均到超圈钱包余额，只能在超圈消费使用，不能提现。可以一次性使用，也可以分多次使用，使用不受限制。',
					'抽奖机会：下单按摩项目和加钟均可获得抽奖机会。',
					'订单完成且参与抽奖的订单不能取消，不能退款。'
				],
			}

		},
		methods: {
			close() {
				this.model = false;

				setTimeout(() => {
					this.showAni = false;
				}, 200);
			},

			open() {
				this.model = true;
				setTimeout(() => {
					this.showAni = true;
				}, 200);
			},

			startCallBack() {
				// 开始旋转
				if (!this.isable) {
					return;
				}
				this.$refs.loading.open();
				this.isable = false;
				var num = 1;
				this.model_image = 'model';
				this.model_text = '恭喜您';
				// if (this.haveNum < 10) {
				// 	num = 1;
				// 	this.model_image = 'model';
				// 	this.model_text = '恭喜您';
				// }
				// if (this.haveNum >= 10 && this.haveNum < 100) {
				// 	num = 10;
				// 	this.model_image = 'model_more';
				// 	this.model_text = '10连抽';
				// }
				// if (this.haveNum >= 100) {
				// 	num = 100;
				// 	this.model_image = 'model_more';
				// 	this.model_text = '100连抽';
				// }

				this.$post('/active.shopPrize/setPrize', {
					num: num
				}, true, () => {
					this.$refs.loading.close();
					this.isable = true;
				}).then(res => {
					this.$refs.loading.close();
					this.$refs.LuckDraw.play();
					this.model_num = `${res.data.prize_list[0].rmb_price}元`;
					// 模拟请求接口2s后返回数据
					setTimeout(() => {
						const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[
							0].id);
						// 得到中奖索引, 开始缓慢停止
						this.$refs.LuckDraw.stop(index);
					}, 2000)
				})

			},

			endCallBack(prize) {
				this.open();
				this.getInit(false);
			},

			getInit(refresh = true) {
				this.$post('/active.shopPrize/getInitInfo').then(res => {
					this.buttons[0].fonts[0].text = `剩余${res.data.haveNum}次`;
					this.haveNum = res.data.haveNum;
					this.isable = true;
					// if (res.data.haveNum < 10) {
					// 	this.buttons[0].fonts[1].text = `抽奖`;
					// }
					// if (res.data.haveNum >= 10 && res.data.haveNum < 100) {
					// 	this.buttons[0].fonts[1].text = `10连抽`;
					// }
					// if (res.data.haveNum >= 100) {
					// 	this.buttons[0].fonts[1].text = `100连抽`;
					// }
					if (refresh) {
						for (var i = 0; i < res.data.prizeList.length; i++) {
							var element = res.data.prizeList[i];
							this.prizes.push({
								id: element.id,
								name: element.name,
								fonts: [{
									text: `${element.rmb_price}元`,
									top: '6px',
									fontColor: '#FFF',
									fontSize: 10,
								}],
								imgs: [{
									src: element.img,
									width: '40%',
									top: '30px'
								}],
								// background: i % 2 == 0 ? '#F48D9D' : '#FD4065'
								background: '#FE5072'

							});
						}
					}
				});
			},

			onTab(e) {
				if (this.tab == e) {
					return;
				}
				this.tab = e;
				if (this.tab == 1) {

				}

				if (this.tab == 2) {
					this.log = [];
					this.logpage = 1;
					this.getMyPrizeLog();
				}
			},

			getList() {
				this.$get('/active.shopPrize/getPrizeLog', {
					page: this.page,
					limit: 100
				}).then(res => {
					this.total = res.data.total;
					res.data.data.forEach(element => {
						var time = this.$u.timeFrom(element.create_time * 1000, 'mm月dd日');
						var name = element.nickname.charAt(0) + '**';;
						name = name.length > 6 ? name.slice(0, 5) + '...' : name
						this.list.push(`${name} ${time} 获得了${element.rmb_price}元`);
					});
					// this.list.push(...res.data.data);
				});
			},

			getMyPrizeLog() {
				this.$get('/active.shopPrize/getMyPrizeLog', {
					page: this.logpage
				}).then(res => {
					this.logtotal = res.data.total;
					this.total_prize_num = res.data.total_prize_num;
					this.log.push(...res.data.data);
				})
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						//加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}

			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.preLoad();
			this.getInit();
			this.getList();
		},

		onReachBottom() {
			if (this.tab == 1) {
				// if (this.total > this.list.length) {
				// 	this.page++;
				// 	this.getList();
				// }
			}

			if (this.tab == 2) {
				if (this.logtotal > this.log.length) {
					this.logpage++;
					this.getMyPrizeLog();
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.wheel-page {
		min-height: 100vh;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/wheel/page_bg.png') 0 -120rpx no-repeat;
		background-size: 100%;
		background-color: #380800;
		padding-top: 140rpx;
	}

	.notice {
		width: 520rpx;
		height: 72rpx;
		background: rgba(253, 42, 83, 0.55);
		border-radius: 36rpx;
		margin: 0 auto 104rpx;
	}

	.wheel {
		position: relative;

		.wheel_header {
			width: 286rpx;
			height: 94rpx;
			position: absolute;
			top: -66rpx;
			left: 50%;
			transform: translateX(-50%);

			image {
				width: 286rpx;
				height: 94rpx;
			}
		}

		.poabox {
			position: relative;
			z-index: 99;
		}

		.container {
			.container_image {
				background: url('https://qiniu-cdn.maeiyun.com//h5static/wheel/container.png') 0 0 no-repeat;
				background-size: 100%;
				width: 100vw;
				height: 264rpx;
				position: absolute;
				bottom: -180rpx;
				flex-direction: column-reverse;

				.tab {
					height: 80rpx;
					width: 100%;
					padding: 0 160rpx;

					.item {
						width: 176rpx;
						height: 52rpx;
						background: #7C1616;
						border-radius: 28rpx;
						border: 2rpx solid #FFFFFF;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 52rpx;
						text-align: center;
						box-sizing: content-box;
					}

					#select {
						background: #CD0C2E;
					}
				}
			}

		}

	}

	.content {
		background: #380800;
		padding: 0 32rpx;
		margin-top: 184rpx;

		.banner {
			height: 232rpx;
			background: rgba(255, 0, 0, 0.56);
			border-radius: 24rpx;
			padding: 50rpx 0;
			justify-content: space-between;

			.banner_item {
				flex: 1;
			}

			text {
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}

			view {
				font-weight: 600;
				font-size: 56rpx;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}

		.list {
			padding: 42rpx 0;
			overflow: hidden;

			.left {
				flex: 1;
				overflow: hidden;

				image {
					width: 112rpx;
					height: 112rpx;
					background: #D8D8D8;
					border-radius: 56rpx;
					margin-right: 24rpx;
				}

				.name {
					flex: 1;
					overflow: hidden;

					text {
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 44rpx;
					}

					view {
						text {
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 36rpx;
						}
					}
				}
			}

			.right {
				view {
					font-weight: 600;
					font-size: 36rpx;
					color: #FD2A53;
					line-height: 44rpx;
				}

				text {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}
			}
		}
	}

	.rich {
		background: #380800;
		padding: 70rpx 32rpx 20rpx;
		margin-top: 184rpx;

		.rich_list {
			display: flex;
			align-items: flex-start;
			margin-bottom: 40rpx;

			.left {
				width: 38rpx;
				height: 38rpx;
				background: #FD2A53;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				margin-right: 16rpx;
			}

			.right {
				flex: 1;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
	}

	.success {
		.header {
			text {
				font-weight: 600;
				font-size: 56rpx;
				color: #FBF4DA;
				line-height: 80rpx;
				text-align: center;
			}
		}

		#show {
			transform: scale(100%);
			transition: 1s ease-out;
		}

		.lottie {
			width: 100vw;
			height: 656rpx;
			position: relative;
			transform: scale(0%);
			transition: 1s ease-out 1s;

			image {
				width: 100vw;
				height: 656rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}



			.text {
				width: 100vw;
				height: 656rpx;
				padding-top: 60rpx;
				position: relative;
				z-index: 10;
				text-align: center;
				line-height: 656rpx;
				font-weight: 600;
				color: #FFF;
				font-size: 36rpx;
			}
		}



		.btn {
			width: 496rpx;
			height: 104rpx;
			background: linear-gradient(179deg, rgba(255, 240, 180, 1), rgba(213, 147, 73, 1), rgba(202, 162, 166, 1), rgba(148, 99, 43, 1), rgba(249, 227, 152, 1));
			border-radius: 56rpx;
			padding: 4rpx;
			overflow: hidden;

			view {
				width: 488rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #FF1037 0%, #FF7C4C 100%);
				border-radius: 56rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFBDC;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}

	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #FFF;
		padding-top: 20vh;
	}
</style>